<template>
	<view class="page">
		<!-- <scroll-view scroll-x class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == current ? 'cur' : ''" v-for="(item, index) in navs" :key="index" @tap="tabSelect(item.type, index)">
					{{ item.title }}
				</view>
			</view>
		</scroll-view> -->
		<fu-tab :tabs="navs" :scrollspy="true" :sticky="true" :top="0" node-title="title" node-key="type" @change="tabSelect"></fu-tab>
		<view :style="{ height: 'calc(100% - ' + CustomBar + 'px)' }" class="margin-top-sm">
			<block v-for="(item, index) in listData" :key="index">
				<view class="margin-bottom-sm bg-white padding-lr padding-tb-sm">
					<view class="flex justify-between">
						<text class="text-sm text-666">服务单号: {{ item.server_no }}</text>
						<text class="text-sm  text-status">{{ item.status | filterStatus }}</text>
					</view>
					<view class="flex margin-top-sm" @click="toDetail(item)">
						<view class="block-150 margin-right-sm"><fu-image class="radius" :src="item.goods_thumb" mode="aspectFill"></fu-image></view>
						<view class="flex-sub">
							<view class="text-df text-cut-2">{{ item.goods_name }}</view>
							<view class="text-sm text-999 margin-top-sm">数量: {{ item.num }}</view>
						</view>
					</view>
					<view class="order-btn-wrap flex justify-end align-center" v-if="type == 'apply'">
						<view class="order-btn text-333 text-center text-sm margin-left-sm" @click.stop="cancelAfter(item.id)">拒绝</view>
						<view class="order-btn text-333 text-center text-sm margin-left-sm active" @click.stop="sendLog(item.id)">同意</view>
					</view>
				</view>
			</block>
		</view>
		<fu-empty
			:paging-list-loaded-all="pagingListLoadedAll"
			:paging-list-no-list-data="pagingListNoListData"
			:list-data-length="listDataLength"
			:isLoadInit="isLoadInit"
		></fu-empty>
		<!-- 拒绝售后 start -->
		<view class="cu-modal" :class="evalueShow ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">拒绝原因</view>
					<view class="action" @tap="evalueShow = false"><text class="cuIcon-close text-red"></text></view>
				</view>
				<view class="padding-sm"><textarea v-model="content" class="text-left text-333 text-df " placeholder="请输入拒绝原因" /></view>
				<view class="cu-bar bg-white justify-end">
					<view class="action">
						<button class="cu-btn  text-333 " @tap="evalueShow = false">取消</button>
						<button class="cu-btn bg-lg text-white margin-left" @tap="sureEvalue">确定</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 拒绝售后 end -->
		<fu-notwork></fu-notwork>
	</view>
</template>

<script>
import pagingList from '@/common/mixin/paging_list.js';
export default {
	mixins: [pagingList],
	data() {
		return {
			CustomBar: this.CustomBar,
			type: 'apply',
			is_click: false,
			navs: [{ title: '申请中', type: 'apply' }, { title: '已处理', type: 'deal' }],
			current: 0,
			hidden: false,
			allowOnloadGetList: false,
			minixPagingListsApi: global.apiUrls.getGoodsAfterSale,
			pageingListApiMethod: 'post',
			refundShow: false, //拒绝弹窗
			refundReason: '' ,//拒绝原因
			evalueShow:false,
			content:'',
			id:0
		};
	},
	filters: {
		filterStatus(val) {
			switch (val) {
				case 0:
					return '申请中';
				case 1:
					return '已同意';
				case 2:
					return '已收回';
				case 3:
					return '已打款';
				case -1:
					return '驳回';
				case -2:
					return '用户取消';
				default:
					return '';
			}
		}
	},
	onShow() {
		 this.pagingListToggle();
	},
	methods: {
		toDetail(item) {
			this.$urouter.navigateTo({
				url: '/pages/order/order/order-after-detail/index',
				params: {
					id: item.id,
					type: this.type
				}
			});
		},
		/**
		 * @description 同意
		 * @param {Object} id 同意id
		 */
		sendLog(id) {
			let that = this;
			this.$util.showModal({
				title: '提示',
				content: '确定同意吗？',
				success: function(res) {
					if (res.confirm) {
						// console.log('用户点击确定');
						that.$api
							.post(global.apiUrls.shop_refund_sure, {
								refund_id: id
							})
							.then(res => {
								console.log(res);
								if (res.data.code == 1) {
									that.$message.success('操作成功');
									that.pagingListToggle();
								} else {
									that.$message.info(res.data.msg);
								}
							})
							.catch(err => {
								console.log(err);
							});
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});
		},
		sureEvalue(){
			let that = this;
			if(!this.content.trim())  return that.$message.info('请输入拒绝原因');
			that.$api
				.post(global.apiUrls.shop_refund_del, {
					refund_id: that.id,
					reject_reason:that.content
				})
				.then(res => {
					console.log(res);
					this.evalueShow = false;	
					if (res.data.code == 1) {
						that.$message.success('操作成功');
						that.pagingListToggle();
					} else {
						that.$message.info(res.data.msg);
					}
				})
				.catch(err => {
					this.evalueShow = false;	
					console.log(err);
				});
		},
		/**
		 * @description 拒绝
		 * @param {Object} id 拒绝id
		 */
		cancelAfter(id) {
			this.id = id;
			this.evalueShow = true;	
		},

		// 申请售后
		pagingListPostData() {
			let { navs, TabCur } = this;
			return {
				type: this.type
			};
		},
		tabSelect(val) {
			console.log(this.pagingListAllowLoadMore);
			if (!this.pagingListAllowLoadMore) return false;
			// this.current = index;
			this.type = val.type;
			this.pagingListToggle();
		}
	}
};
</script>

<style lang="scss" scoped>
.add {
	background: $fu-main-color !important;
	color: $uni-text-color-inverse;
}
.page {
	// height: 100%;
	// min-height: 100%;
	// max-height: 100%;
}
.block-150 {
	width: 150rpx;
	mim-width: 150rpx;
	height: 150rpx;
	min-height: 150rpx;
	background-color: #eeeeee;
	image {
		width: 100%;
		height: 100%;
	}
}
.nav .cu-item.cur {
	position: relative;
	border-bottom: 0;
	color: $fu-main-color;
	border-bottom: 1rpx solid $fu-main-color;
}
// 拒绝原因 start
uni-textarea {
	width: 100%;
}
.bg-lg {
	background: linear-gradient();
}
// 拒绝原因 end
.order-btn-wrap {
	padding: 0rpx 0;
	.order-btn {
		width: 130rpx;
		height: 48rpx;
		line-height: 48rpx;
		background: #ffffff;
		border: 1px solid #bfbfbf;
		border-radius: 24rpx;

		&.active {
			border: 1px solid $theme;
			color: $theme;
		}
	}
}
.text-status {
	color: $theme;
}
uni-textarea {
	width: 100%;
}
.bg-lg {
	background: linear-gradient();
}
</style>
